<template>
	<view class="page">
		<!-- 公告 ——start -->
		<view class="marquee-root" v-if="contentIsShow">
			<view class="marquee-content">
				<view class="content">
					<view class="iconfont icon-gonggao" style="color: #EEC900;"></view>
					<view class="text">
						{{content}}
					</view>
				</view>
			</view>
		</view>
		<!-- 公告 ——end -->
		<view class="content">
			<u-form>
				<view class="row">
					<u-form-item class="item" label="校区:" prop="userInfo.sex" borderBottom :labelStyle="labelStyle"
						label-width="100rpx" ref="item1" rightIcon="arrow-right">
						<picker class="itemPicker" @change="schoolChange" :value="schoolIndex" :range="schoolArray">
							<view class="uni-input">{{schoolArray[schoolIndex]}}</view>
						</picker>
					</u-form-item>
					<u-form-item class="item" label="教学楼:" prop="userInfo.sex" borderBottom rightIcon="arrow-right"
						ref="item2" :labelStyle="labelStyle" label-width="120rpx">
						<picker @change="buildChange" :value="buildIndex" :range="buildArray" class="itemPicker">
							<view class="uni-input">{{buildArray[buildIndex]}}</view>
						</picker>
					</u-form-item>
				</view>
				<view class="row">
					<u-form-item class="item" label="周次:" prop="userInfo.sex" borderBottom rightIcon="arrow-right"
						ref="item3" :labelStyle="labelStyle" label-width="100rpx">
						<picker class="itemPicker" @change="weekChange" :value="weekIndex" :range="weekArray">
							<view class="uni-input">{{weekArray[weekIndex]}}</view>
						</picker>
					</u-form-item>
					<u-form-item class="item" label="星期:" prop="userInfo.sex" borderBottom rightIcon="arrow-right"
						ref="item4" :labelStyle="labelStyle" label-width="100rpx">
						<picker class="itemPicker" @change="dayChange" :value="dayIndex" :range="dayArray">
							<view class="uni-input">{{dayArray[dayIndex]}}</view>
						</picker>
					</u-form-item>
				</view>
			</u-form>
			<view class="foot">
				<view class="isHave">
					<view class="tip_no_have">
						<view class="iconfont icon-v16kecheng-wuke-copy" style="color:#D6D6D6;font-size: 40rpx;">
						</view>
						<view>无课</view>
					</view>
					<view class="tip_have">
						<view class="iconfont icon-v16kecheng-wuke-copy" style="color: #23b8ff;font-size: 40rpx;">
						</view>
						<view>有课</view>
					</view>
				</view>
				<button class="search" @click="search()">查询</button>
			</view>

		</view>
		<u-picker v-model="showSchool" :columns="columns"></u-picker>
	</view>
</template>
<script>
	export default {
		name: 'searchPopUp',
		created() {
			// let isHaiZhu = getApp().globalData.isHaiZhu;
			if (getApp().globalData.isHaiZhu) {
				this.schoolIndex = 0;
			} else {
				this.schoolIndex = 1;
			}
			this.marquee()
			this.getCurrentDate()
		},
		data() {
			return {
				labelStyle: {
					fontSize: '32rpx',

				},
				showSchool: false,
				schoolIndex: 0, //学校选择器下标
				schoolArray: ['海珠校区', '白云校区'], //学校选择器数组
				buildIndex: 0, //教学楼选择器下标
				weekIndex: 0,
				weekArray: ["第1周", "第2周", "第3周", "第4周", "第5周", "第6周", "第7周", "第8周", "第9周", "第10周", "第11周", "第12周", "第13周",
					"第14周", "第15周", "第16周", "第17周", "第18周", "第19周", "第20周"
				],
				dayIndex: 0, //选择星期几
				dayArray: ["星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日"],
				info: {
					campus: '',
					building: '',
					week: '',
					xingqi: ''
				}, //传给父组件的数据
				// contentText: '数据来源于学校，仅供参考。未显示的教室有以下两种原因：1、该教室整个学期都无课 2、该教室已有其他用途'
				// buildArray: ['教学楼']//教学楼选择器数组
				content: '',
				contentIsShow: false
			}
		},
		computed: {
			// schoolIndex: {
			// 	get: function() {
			// 		if (getApp().globalData.isHaiZhu) {
			// 			return 0;
			// 		} else {
			// 			return 1;
			// 		}
			// 	},
			// 	// setter
			// 	set: function(newValue) {
			// 		this.schoolIndex = newValue
			// 	}
			// },
			buildArray() {
				if (this.schoolIndex == 0) {
					return ["教学楼"]
				} else {
					return ["杨钊杨勋楼", "D栋综合教学楼"]
				}
			}
		},
		methods: {
			async marquee() {
				let header = new Object()
				header.Authority = uni.getStorageSync("Authority")
				let res = await getApp().UniRequest("/notice/getNotice?id=2", "Get", "", header);
				console.log(res,'横幅');
				if (res.code === 20000) {
					this.content = res.data.data.content;
					console.log(this.content,'横幅内容');
					if (res.data.data.isShow === 1) {
						this.contentIsShow = res.data.data.isShow
					}
					
				}
			},
			//获得现在周几
			async getCurrentDate() {
				let dd;
				let timestamp;
				let isTrue = true;
				timestamp = (Date.parse(new Date())) / 1000;
				let res = await getApp().UniRequest("/week", "Get", "", ""); //获得当前周
				this.weekIndex = res.data.week - 1;
				let xingqi = "日一二三四五六".charAt(new Date().getDay()); //获得当前周几
				let xingqiArray = ["一", "二", "三", "四", "五", "六", "日"];
				this.dayIndex = xingqiArray.indexOf(xingqi);
			},
			//选择校区
			schoolChange(e) {
				this.buildIndex = 0; //初始化，防止切换为海珠校区时，教学楼数组并没有这个下标
				this.schoolIndex = parseInt(e.detail.value);
			},
			//选择教学楼
			buildChange(e) {
				this.buildIndex = parseInt(e.detail.value)
			},
			//选择周次
			weekChange(e) {
				this.weekIndex = parseInt(e.detail.value);
			},
			//选择星期几
			dayChange(e) {
				this.dayIndex = parseInt(e.detail.value);
				// console.log('星期',this.dayIndex)
			},
			//查询
			search() {
				this.info.campus = this.schoolArray[this.schoolIndex];
				this.info.building = this.buildArray[this.buildIndex];
				this.info.week = this.weekIndex + 1;
				this.info.xingqi = this.dayIndex + 1;
				// console.log(this.info)
				this.$emit('toSearch', this.info);
			}
		}
	}
</script>
<style lang="less">
	.page {
		height: 100%;
		width: 100%;
		background-color: #FFFFFF;

		@keyframes marqueeAnim {
			0% {
				transform: translateX(100vw);
			}

			100% {
				transform: translateX(-100%);
			}
		}

		.marquee-root {
			width: 100%;
			height: 60rpx;
			text-align: left;
			line-height: 70rpx;
			overflow: hidden;

			// background-color: burlywood;
			.marquee-content {
				white-space: nowrap;
				display: inline-block;
				color: #000000;
				font-size: 30rpx;
				animation: marqueeAnim 12s linear 0s infinite;

				.content {
					display: flex;
				}
			}
		}

		.content {
			height: 300rpx;

			.row {
				display: flex;
				width: 100%;

				.item {
					width: 40%;
					margin-left: 30rpx;

					.itemPicker {
						font-size: 32rpx;
						font-weight: 500;
						width: 150rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
				}
			}

			.foot {
				display: flex;
				margin-top: 20rpx;

				.isHave {
					// flex: 5;
					position: relative;
					bottom: 10rpx;
					display: flex;
					height: 60rpx;
					// margin-top: 10rpx;
					margin-left: 30rpx;
					font-size: 33rpx;

					// margin-left: ;
					.tip_no_have,
					.tip_have {
						line-height: 60rpx;
						display: flex;
					}

					.tip_no_have {
						margin-right: 20rpx;
					}
				}

				// }
			}

			.search {
				// width: 130rpx;
				height: 60rpx;
				margin: 0rpx;
				position: absolute;
				right: 20rpx;
				margin: 1rpx;
				bottom: 10rpx;
				// margin-top: 10rpx;
				line-height: 60rpx;
				font-size: 30rpx;
				background-color: #23b8ff;
				color: #FFFFFF;

			}
		}
	}
</style>
